<template>
	<view v-if="(item || null) != null" class="data-list">
		<view class="items bg-white pr" :data-value="'/pages/fcc/groups/detail/detail?goods_id=' + item.id" @tap="url_event">
			<image class="pa img1" :src="item.images" mode="aspectFill" />
			<view class="base">
				<view class="tj-multi-line-hiding"><text>{{lang_info.list_need_how_many_before}}{{ item.num }}{{lang_info.list_need_how_many_after}}</text>{{ item.title }}</view>
				<view class="ftitle pr">
					<image class="pa img2" :src="groups_static_url+'mini/hot.png'" />
					<text class="cr-grey">{{lang_info.list_already_buy_before}} {{ item.sales_count }} {{lang_info.list_already_buy_after}}</text>
				</view>
				<view class="price pr">
					<view class="sales-price">
						<text class="t1">{{lang_info.list_price_before}}</text>
						<text class="t2">{{ currency_symbol }}</text>{{ item.min_price }}
					</view>
					<block v-if="item.price_preferential > 0">
						<view class="old-price pa">
							{{lang_info.list_price_old_before}}{{ currency_symbol }}{{ item.price_preferential }}{{lang_info.list_price_old_after}}
						</view>
						<image class="old-price-f pa img3" :src="groups_static_url+'mini/jianjian.png'" />
					</block>
					<view :class="'gotopin pa '+lang_info.app_lang">
						<view class="kuohao2">{{lang_info.list_go_to_order_text}}</view>
						<view class="kuohao1"></view>
						<view class="cl"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var groups_static_url = app.globalData.get_static_url('groups', true);
	export default {
		name:"groups-item",
		data() {
			return {
				groups_static_url: groups_static_url,
				currency_symbol: app.globalData.currency_symbol(),
			};
		},
		components: {},
		props: {
			propConfig: {
				type: [String, Object],
				default: null
			},
			propData: {
			    type: Object,
			    default: () => {
			        return {};
			    },
			}
		},
		//对传值进行计算
		computed:{
			item(){
				return this.propData || null;
			},
			lang_info(){
				return this.propConfig || null;
			}
		},
		methods: {
			// url事件
			url_event(e) {
				app.globalData.url_event(e);
			}
		}
	}
</script>

<style>
	.tj-multi-line-hiding {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    line-clamp: 2;
	    -webkit-box-orient: vertical;
	    white-space: normal;
	    word-break: break-all;
	    line-height: 44rpx !important;
	    max-height: 84rpx !important;
	    font-size: 26rpx;
	    color: #000;
	}
	.tj-multi-line-hiding text{
		background: #fd302d;
		color:#fff;
		padding:2rpx 13rpx;
		border-radius:8rpx;
		font-size: 24rpx;
	}
	.data-list .items {
	    box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    margin: 20rpx;
	    padding: 20rpx;
	    min-height: 240rpx;
	    border-radius: 10rpx;
		padding-left:240rpx;
	}
	.data-list .items .img1 {
	    width: 200rpx;
	    height: 200rpx;
	    border-radius: 10rpx;
		left:20rpx;
		top:20rpx;
	}
	.data-list .items .base {
	    text-align: left;
	    font-size: 27rpx;
	    position: relative;
	}
	.data-list .items .base .ftitle {
	    padding-top: 25rpx;
	    padding-bottom: 17rpx;
		padding-left:40rpx;
		margin-bottom:50rpx;
	}
	.data-list .items .base .ftitle .img2{
		width:32rpx;
		height:32rpx;
		left:0;
		top:25rpx;
	}
	.data-list .items .base .sales-price {
	    color: #fd302d;
	    font-size:32rpx;
		font-weight: bold;
		line-height: 80rpx;
	}
	.data-list .items .base .sales-price .t1{
		font-weight: normal;
		margin-right:10rpx;
		margin-left:15rpx;
	}
	.data-list .items .base .sales-price .t2{
		font-size:24rpx;
		margin-right:5rpx;
	}
	.data-list .items .base .price {
	    margin-top: 15rpx;
		background:#ffecee;
		height:80rpx;
		border-radius: 15rpx;
		z-index: 1;
	}
	.data-list .items .base .gotopin {
		right:0;
		top:0;
		height:80rpx;
	}
	.data-list .items .base .gotopin .kuohao1{
		width: 0;
		height: 0;
		border-left: 30rpx solid transparent;
		border-bottom: 80rpx solid #fd302d;
		float:right;
	}
	.data-list .items .base .gotopin .kuohao2{
		height:80rpx;
		line-height: 80rpx;
		font-size:30rpx;
		font-weight: bold;
		background: #fd302d;
		float:right;
		padding-right:20rpx;
		color:#fff;
		border-radius: 0 15rpx 15rpx 0;
	}
	.data-list .items .base .gotopin.zh .kuohao2{
		font-size:42rpx;
		padding-left:10rpx;
	}
	.data-list .items .base .old-price {
	    height:50rpx;
		left:0;
		bottom:70rpx;
		z-index: 2;
		background: #fd302d;
		line-height: 50rpx;
		color:#fff;
		border-radius: 10rpx;
		padding:0 15rpx;
		font-size:24rpx;
	}
	.data-list .items .base .old-price-f {
		width:23rpx;
		height:13rpx;
		left:12rpx;
		bottom:60rpx;
		z-index: 3;
	}
	.data-list .items .base .old-price-f .img3{
		width:23rpx;
		height:13rpx;
	}
</style>